<template>
  <div class="project-kanban-page">
    <div class="kanban-header">
      <div class="header-left">
        <el-icon class="back-icon" @click="$router.back()">
          <ArrowLeft />
        </el-icon>
        <h2>{{ projectName }}</h2>
        <el-tag type="primary">看板视图</el-tag>
      </div>
      <div class="header-actions">
        <el-button @click="showAIDialog = true" type="primary">
          <el-icon><MagicStick /></el-icon>
          AI助手
        </el-button>
        <el-button @click="handleAddTask">
          <el-icon><Plus /></el-icon>
          新建任务
        </el-button>
      </div>
    </div>

    <div class="kanban-body">
      <div class="kanban-columns">
        <div 
          v-for="column in columns" 
          :key="column.key"
          class="kanban-column"
          @drop="handleDrop(column.key, $event)"
          @dragover.prevent
        >
          <div class="column-header" :style="{ borderTopColor: column.color }">
            <div class="column-title">
              <span>{{ column.title }}</span>
              <el-badge :value="column.tasks.length" :type="column.type" />
            </div>
            <el-button size="small" circle @click="handleAddTask(column.key)">
              <el-icon><Plus /></el-icon>
            </el-button>
          </div>

          <div class="column-body">
            <div
              v-for="task in column.tasks"
              :key="task.id"
              class="task-card"
              draggable="true"
              @dragstart="handleDragStart(task)"
              @click="handleViewTask(task)"
            >
              <div class="task-header">
                <el-tag :type="getPriorityType(task.priority)" size="small">
                  {{ getPriorityLabel(task.priority) }}
                </el-tag>
                <el-icon v-if="task.hasAttachment"><Paperclip /></el-icon>
              </div>
              <div class="task-title">{{ task.title }}</div>
              <div class="task-desc">{{ task.description }}</div>
              <div class="task-meta">
                <el-avatar :size="24">{{ task.assignee }}</el-avatar>
                <span class="task-date">{{ task.dueDate }}</span>
              </div>
            </div>

            <el-empty 
              v-if="column.tasks.length === 0" 
              description="暂无任务"
              :image-size="60"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- AI助手对话框 -->
    <el-dialog v-model="showAIDialog" title="AI项目助手" width="600px">
      <el-input
        v-model="aiInput"
        type="textarea"
        :rows="4"
        placeholder="例如：帮我分析当前项目进度，给出优化建议"
      />
      <template #footer>
        <el-button @click="showAIDialog = false">取消</el-button>
        <el-button type="primary" @click="handleAIAnalyze">
          分析
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import {
  ArrowLeft, MagicStick, Plus, Paperclip
} from '@element-plus/icons-vue'

const route = useRoute()
const projectName = ref('ERP系统开发')
const showAIDialog = ref(false)
const aiInput = ref('')

const columns = reactive([
  {
    key: 'todo',
    title: '待办',
    color: '#909399',
    type: 'info',
    tasks: [
      {
        id: 1,
        title: '需求文档编写',
        description: '整理和编写系统需求文档',
        priority: 'high',
        assignee: '张三',
        dueDate: '2025-01-25',
        hasAttachment: true
      },
      {
        id: 2,
        title: 'UI设计稿',
        description: '设计系统界面原型',
        priority: 'medium',
        assignee: '李四',
        dueDate: '2025-01-28'
      }
    ]
  },
  {
    key: 'doing',
    title: '进行中',
    color: '#409eff',
    type: 'primary',
    tasks: [
      {
        id: 3,
        title: '前端页面开发',
        description: '开发用户管理模块',
        priority: 'high',
        assignee: '王五',
        dueDate: '2025-02-05'
      },
      {
        id: 4,
        title: 'API接口开发',
        description: '开发用户相关API',
        priority: 'high',
        assignee: '赵六',
        dueDate: '2025-02-03'
      }
    ]
  },
  {
    key: 'review',
    title: '待审核',
    color: '#e6a23c',
    type: 'warning',
    tasks: [
      {
        id: 5,
        title: '登录模块测试',
        description: '测试登录功能',
        priority: 'medium',
        assignee: '钱七',
        dueDate: '2025-01-30'
      }
    ]
  },
  {
    key: 'done',
    title: '已完成',
    color: '#67c23a',
    type: 'success',
    tasks: [
      {
        id: 6,
        title: '数据库设计',
        description: '完成数据库表结构设计',
        priority: 'high',
        assignee: '张三',
        dueDate: '2025-01-20'
      },
      {
        id: 7,
        title: '项目框架搭建',
        description: '完成项目基础框架',
        priority: 'high',
        assignee: '李四',
        dueDate: '2025-01-18'
      }
    ]
  }
])

let dragTask = null
let dragFromColumn = null

const handleDragStart = (task) => {
  dragTask = task
  // 找到任务所在列
  dragFromColumn = columns.find(col => 
    col.tasks.some(t => t.id === task.id)
  )
}

const handleDrop = (columnKey) => {
  if (dragTask && dragFromColumn) {
    const targetColumn = columns.find(col => col.key === columnKey)
    
    // 从原列移除
    const index = dragFromColumn.tasks.findIndex(t => t.id === dragTask.id)
    if (index !== -1) {
      dragFromColumn.tasks.splice(index, 1)
    }
    
    // 添加到目标列
    targetColumn.tasks.push(dragTask)
    
    ElMessage.success(`任务已移动到 ${targetColumn.title}`)
    dragTask = null
    dragFromColumn = null
  }
}

const getPriorityType = (priority) => {
  const types = {
    low: 'info',
    medium: 'warning',
    high: 'danger'
  }
  return types[priority] || ''
}

const getPriorityLabel = (priority) => {
  const labels = {
    low: '低',
    medium: '中',
    high: '高'
  }
  return labels[priority] || priority
}

const handleAddTask = (columnKey) => {
  ElMessage.info('新建任务功能开发中...')
}

const handleViewTask = (task) => {
  ElMessage.info(`查看任务：${task.title}`)
}

const handleAIAnalyze = () => {
  ElMessage.success('AI正在分析项目进度...')
  showAIDialog.value = false
}
</script>

<style scoped>
.project-kanban-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f0f2f5;
}

.kanban-header {
  height: 60px;
  background: white;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.back-icon {
  font-size: 20px;
  cursor: pointer;
}

.header-left h2 {
  margin: 0;
  font-size: 18px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.kanban-body {
  flex: 1;
  overflow-x: auto;
  padding: 20px;
}

.kanban-columns {
  display: flex;
  gap: 20px;
  min-height: 100%;
}

.kanban-column {
  flex: 0 0 300px;
  background: #f9f9f9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.column-header {
  padding: 15px;
  background: white;
  border-radius: 8px 8px 0 0;
  border-top: 3px solid;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.column-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  font-size: 15px;
}

.column-body {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}

.task-card {
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 12px;
  cursor: move;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.3s;
}

.task-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

.task-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.task-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #303133;
}

.task-desc {
  font-size: 12px;
  color: #606266;
  margin-bottom: 12px;
  line-height: 1.5;
}

.task-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-date {
  font-size: 12px;
  color: #909399;
}
</style>

